<template>
    <div id="home">
        <div class="home-head">
            <el-header height="60" class="head-nav">
                <!-- 默认所有正常用户都可以发出一个咨询信息 -->
                <el-tooltip content="查看个人信息">
                    <div @click="userInfoShow=true">{{userInfo.userName}}</div>
                </el-tooltip>
                <div @click="messageAddShow=true">发布资讯</div>
                <div v-if="authority.office" @click="officeAddShow = true">申请机构</div>
                <div v-if="authority.admin" @click="go">后台</div>
            </el-header>
            <div style="height: 60px"></div>
            <img src="../assets/home.jpg">
        </div>
        <div class="flex-content">
            <div class="message">
                <div class="title">校园资讯</div>
                <list @click="onMessageShow" :list="getMessageTitle()"></list>
            </div>
            <div class="office">
                <div class="title">校园机构</div>
                <list @click="onOfficeShow" :list="officeList"></list>
            </div>

        </div>
        <office-detailed @close="officeDetailed.show=false" :info="officeDetailed.info" :show="officeDetailed.show"></office-detailed>
        <message-detailed @close="messageDetailed.show=false" :info="messageDetailed.info" :show="messageDetailed.show" ></message-detailed>
        <message-add @close="messageAddShow=false" :user-id="userInfo.id" :show="messageAddShow"></message-add>
        <office-add @close="officeAddShow=false" :user-id="userInfo.id" :show="officeAddShow"></office-add>
        <user-info @close="userInfoShow=false" :show="userInfoShow" :userInfo="userInfo"></user-info>
    </div>
</template>

<script>
    import officeDetailed from '../components/home/officeDetailed'
    import messageDetailed from '../components/home/messageDetailed'
    import officeAdd from '../components/home/officeAdd'
    import messageAdd from '../components/home/messageAdd'
    import list from '../components/home/list'
    import userInfo from '../components/home/userInfo'
    export default {
        name: "Home",
        data(){
            return {
                userInfo : {}, // 用户信息
                messageList : [], // 资讯列表
                officeList : [], // 机构列表
                authority : { // 权限列表
                    admin : false, // 后台权限
                    office : false, // 机构权限，只有是老师登录的时候才显示
                },
                messageDetailed : {
                    show : false,
                    info : {},
                },
                officeDetailed : {
                    show : false,
                    info : {},
                },
                userInfoShow : false,
                messageAddShow : false, // 发布咨询默认不显示出来、只有在点击的时候才显示
                officeAddShow : false, // 机构申请默认不显示出来，只有在点击的时候才显示
            }
        },
        mounted() {
            this.getListByQuery();
            this.getInvoice();
            if (this.userInfo.userType == 2){
                // 老师进来的时候，给 申请机构 的显示权限
                this.authority.office = true;
            }else if (this.userInfo.userType == 3){
                // 工作人员进来的时候，给后台权限
                this.authority.admin = true;
            }
        },
        computed : {
        },
        methods : {
            go(){
                this.$router.push("/pord");
            },
            onMessageShow(item){
                this.messageDetailed.show = true;
                this.messageDetailed.info = item;
            },
            onOfficeShow(item){
                this.officeDetailed.show = true;
                this.officeDetailed.info = item;
            },
            getListByQuery(){
                this.loading = true;
                this.$api.office.officeAll()
                    .then(response => {
                        this.officeList = response.data;
                    });
                this.loading = false;
            },
            getInvoice(){
                this.loading = true;
                this.$api.message.messageFlag()
                    .then(response => {
                        this.messageList = response.data;
                    })
                    .catch(error => {
                        this.$message.error(error.message)
                    })
            },
            getMessageTitle(){
                return this.messageList.map(item => {
                    item.name = item.title;
                    return item;
                });
            },
        },
        created() {
            this.userInfo = this.$route.params.data;
        },
        components:{
            "office-add" : officeAdd,
            list,
            "message-add" : messageAdd,
            "message-detailed" : messageDetailed,
            "office-detailed" : officeDetailed,
            "user-info" : userInfo,
        }
    }
</script>

<style lang="scss" scoped>
    $baseColor: #409eff;
    #home{
        background: white;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 100vh;

        .home-head{
            img{
                width: 100%;
            }
            .head-nav{
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                min-width: 400px;
                color: white;
                background: $baseColor;
                text-align: right;
                line-height: 60px;
                display: flex;
                justify-content: flex-end;
                align-items: stretch;
                div{
                    height: 60px;
                    box-sizing: content-box;
                    cursor: pointer;
                    padding: 0px 10px 0px 10px;
                    font-size: 12px;
                    width: 60px;
                    text-align: center;

                    &:hover{
                        background: #fff;
                        color: $baseColor;
                        transition: 0.4s;
                    }
                }
            }
        }
        .flex-content{
            display: flex;
            justify-content: space-between;
            width: 80%;
            margin: 10px auto;
            .title {
                background: white;
                color: $baseColor;
                font-size: 18px;
                font-weight: bold;
                padding-bottom: 10px;
                border-bottom: 1px solid $baseColor;
                margin-bottom: 10px;
            }
            .message {
                width: 58%;
            }
            .office {
                width: 38%;
            }
        }
    }
</style>
